<template>
  <div class="index-sentinel-root">
    <!-- 左侧列表 -->
    <div class="sentinel-resources info-root">
      <tableResource @row-click="resourceRowClick" @service-id-change="currentMachineProvide"></tableResource>
    </div>
    <!-- 中间图表 -->
    <div class="sentinel-metric-all">
      <div class="sentinel-metric-line info-root">
        <div>
          <el-input style="width: 280px" placeholder="资源名称" v-model="lineParam.resource" />
          <el-input style="width: 155px" placeholder="开始时间" v-model="lineParam.startTime" />
          <el-input style="width: 155px" placeholder="结束时间" v-model="lineParam.endTime" />
          <el-button type="primary" :icon="Refresh" @click="lineSearch('')"></el-button>
          <el-button-group>
            <el-button type="info" round @click="lineSearch('5m')">5m</el-button>
            <el-button type="info" round @click="lineSearch('10m')">10m</el-button>
            <el-button type="info" round @click="lineSearch('1h')">1h</el-button>
            <el-button type="info" round @click="lineSearch('6h')">6h</el-button>
            <el-button type="info" round @click="lineSearch('1d')">1d</el-button>
          </el-button-group>
        </div>
        <div>
          <chartLineMetric ref="ChartLineMetricRef" :resource="lineParam.resource" :interval="lineParam.interval"
            :start-time="lineParam.startTime" :end-time="lineParam.endTime" :show-s="true">
          </chartLineMetric>
        </div>
      </div>
      <div class="sentinel-metric-bar info-root">
        <div>
          <el-input style="width: 155px" placeholder="开始时间" v-model="barParam.startTime" />
          <el-input style="width: 155px" placeholder="结束时间" v-model="barParam.endTime" />
          <el-button type="primary" :icon="Refresh" @click="barSearch('')"></el-button>
          <el-button-group>
            <el-button type="info" round @click="barSearch('5m')">5m</el-button>
            <el-button type="info" round @click="barSearch('10m')">10m</el-button>
            <el-button type="info" round @click="barSearch('1h')">1h</el-button>
            <el-button type="info" round @click="barSearch('6h')">6h</el-button>
            <el-button type="info" round @click="barSearch('1d')">1d</el-button>
          </el-button-group>
        </div>
        <div>
          <chartBarResource ref="ChartBarResourceRef" :start-time="barParam.startTime" :end-time="barParam.endTime"
            :interval="barParam.interval">
          </chartBarResource>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, provide } from "vue";
import { Refresh } from '@element-plus/icons-vue';
import { getNowTimeFormat } from "@/assets/utils/util";
// components
import tableResource from './TableResource.vue'
import chartLineMetric from './ChartLineMetric.vue';
import chartBarResource from './ChartBarResource.vue';

/** ============================================================
 * 折线图
 * ============================================================ */
const ChartLineMetricRef = ref();
const lineParam = ref({
  resource: "__total_inbound_traffic__",
  interval: "1d",
  startTime: getNowTimeFormat(),
  endTime: getNowTimeFormat()
})
const resourceRowClick = (resource: string) => {
  lineParam.value.resource = resource;
  ChartLineMetricRef?.value?.reload();
}

const lineSearch = (interval: string) => {
  lineParam.value.interval = interval;
  ChartLineMetricRef?.value?.reload();
}


/** ============================================================
 * 柱状图
 * ============================================================ */
const ChartBarResourceRef = ref();
const barParam = ref({
  interval: "1d",
  startTime: getNowTimeFormat(),
  endTime: getNowTimeFormat()
})

const barSearch = (interval: string) => {
  barParam.value.interval = interval;
  ChartBarResourceRef?.value?.reload();
}

/** ============================================================
 * 其他
 * ============================================================ */
// 注入当前机器
const currentMachine = ref({ appName: '' });
provide('currentMachine', currentMachine);

const currentMachineProvide = (appName: string) => {
  currentMachine.value.appName = appName;
  ChartLineMetricRef?.value?.reload();
  ChartBarResourceRef?.value?.reload();
}

const reload = () => {
}

onMounted(() => {
  reload();
})

</script>

<style scoped lang="scss">
.index-sentinel-root {
  @include box(100%, 100%);
  @include flex(row, center, center);

  .info-root {
    border: 0;
    padding: 10px;
  }

  .sentinel-resources {
    @include box(530px, 100%);
  }

  .sentinel-metric-all {
    @include box(calc(100% - 530px), 100%);
    margin-left: 15px;


    .sentinel-metric-line,
    .sentinel-metric-bar {

      &>div:first-child {
        @include box(100%, 25px);
        @include flex(row, flex-end, center);

        :deep(.el-input) {
          margin-right: 10px;
        }

        .el-button-group {
          margin-left: 10px;
        }
      }

      &>div:last-child {
        @include box(100%, calc(100% - 25px));
      }
    }

    .sentinel-metric-line {
      @include box(100%, calc(50% - 15px));
    }

    .sentinel-metric-bar {
      @include box(100%, 50%);
      margin-top: 15px;
    }

  }

  .sentinel-metric-machines {
    padding-left: 10px;
    @include box(300px, 100%);
  }
}
</style>